<template>
  <l-content :app="app">
    <el-form :inline="true" :model="searchForm" size="mini"
             onkeydown="if(event.keyCode===13){return false;}" @keyup.native.enter="onSearch">
      <el-form-item class="pull-right">
        <el-input
          placeholder="任务名称"
          icon="search"
          v-model="searchForm.dtlJobName"
          :on-icon-click="onSearch">
        </el-input>
      </el-form-item>
      <el-form-item class="pull-right">
        执行结果：
        <el-select v-model="searchForm.runResultCode"  placeholder="请选择" @change="onSearch">
          <el-option label="正常" value="0000"/>
          <el-option label="异常" value="9999"/>
        </el-select>
      </el-form-item>
    </el-form>
    <!--
      table 根据这个来获取子组件的方法
      tableData 表格数据
      handleSelectionChange 监听选择
      handleCurrentChange 监听翻页事件
      loading 表格加载,！注意，loading的用法和原生的有区别
    -->
    <c-page-table
      :data="tableData"
      @selection-change="handleSelectionChange"
      @size-change="handleSizeChange"
      @sort-change="handleSortChange"
      @current-change="handleCurrentChange"
      :loading="loading">
      <el-table-column
        prop="jobName"
        label="任务名称"
        min-width="150">
      </el-table-column>
      <el-table-column
        prop="description"
        label="任务描述"
        min-width="200">
      </el-table-column>
      <el-table-column
        prop="runStartTimeStr"
        label="执行开始时间"
        min-width="150">
      </el-table-column>
      <el-table-column
        prop="runEndTimeStr"
        label="执行结束时间"
        min-width="150">
      </el-table-column>
      <el-table-column
        prop="runResultCodeDict"
        label="状态"
        min-width="80">
      </el-table-column>
      <el-table-column
        prop="runUsedTime"
        label="耗时(毫秒)"
        min-width="100">
      </el-table-column>
      <el-table-column
        prop="fireInstanceId"
        label="触发实例ID"
        min-width="150">
      </el-table-column>
    </c-page-table>

    <component :is="dialog" :data="dialogData" @ok="handleCurrentChange(tableData.page)" @close="dialog = ''"/>
  </l-content>
</template>

<script>

// 用于查询的参数
const paramForm = {}
export default {
  name: 'QuartzLog',
  props: {
    app: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      currentPage: 1,
      pageSize: 50,
      searchForm: {
        jobName: '',
        runResultCode: ''
      },
      dialog: '',
      dialogData: {},
      canDeleteBatch: false,
      loading: false,
      tableData: {
        /* 表格数据固定写法 */
        records: 0,
        page: 1,
        rows: []
      },
      multipleSelection: [] // 选中项
    }
  },
  // 详情查看生命周期，约等于界面载入完成
  mounted () {
    //      debugger
    this.handleCurrentChange(1)
  },
  destroyed () {
    this.$message.closeAll() // 避免弹框会影响到新开的页面
  },
  methods: {
    onSearch () {
      // 把searchForm里面的值覆盖到paramForm里面去
      Object.assign(paramForm, this.searchForm)
      this.handleCurrentChange(1)
    },
    handleSizeChange (pageSize) {
      this.pageSize = pageSize
    },
    handleSortChange ({sidx, sord}) {
      // 排序设置
      paramForm.sidx = sidx
      paramForm.sord = sord
      this.handleCurrentChange(this.currentPage)
    },
    handleCurrentChange (currentPage) {
      this.currentPage = currentPage
      this.loading = true
      return new Promise((resolve, reject) => {
        // this.pageSize 获取当前每页显示数量,
        this.$service.system.qryQrtzRunlog({
          ...paramForm,
          page: currentPage,
          rows: this.pageSize
        }).then(res => {
          this.tableData = res.data
          resolve()
        }).catch(reject).finally(() => {
          this.loading = false
        })
      })
    }
  }
}
</script>

<style>

</style>
